<template>
	<view class="forceDetail">
		<view class="top">
			<view class="num">
				<text>{{nowVal}}</text>
			</view>
			<text>当前业绩值</text>
			<view style="display: flex;" v-if="pageParam.type == 'member'">
			    <text class="btn" @click="jump('results_deposit')">提现</text>
			    <text class="btn" @click="jump('results_send', 'achievement')">转送朋友</text>
			</view>
		</view>
		<view class="nav"  v-if="pageParam.type == 'member'">
			<view @click="getsel(index)" :class="index==selNav?'nav-item hover':'nav-item'" v-for="(item,index) in navList" :key="index">
				<text>{{item.itemName}}</text>
			</view>
		</view>
		<view v-if="pageResult.list.length > 0">	
			<view  class="line" v-for="(item,index) in pageResult.list" :key="index">
				<view class="left">
					<text>{{item.remark}}</text>
					<text>{{item.created_at}}</text>
				</view>
				<view class="right">
					<text :class="item.num_type==2?'red':''">{{item.num}}</text>
					<text style="color: #999999;text-align: right;font-size: 30rpx;">{{item.old_num}}</text>
				</view>
			</view>
			
		</view>
		<view v-else class="nolist">
			<image src="https://hdsq.aoorange.cn/attachment/xcx/icon/forceDetail_nomsg.png" mode="widthFix"></image>
		    <text>暂无相关记录～</text>
		</view>
	</view>
</template>

<script>
	import serve from '../static/request.js';
	import storage from '../static/appkey.js';
	import common from '../static/jump.js';
	import {Base64} from '../static/base64.min.js';
	export default {
		data() {
			return {
				nowVal : 0,
				nowMoney: 0,
				navList: [
				   {"itemId": "0", "itemName" : "全部"},
				   {"itemId": "1", "itemName" : "收入"},
				   {"itemId": "2", "itemName" : "支出"},
				   ],
				selNav : 0,
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					credit_type: 'achievement',
					type : 'member',
					num_type : 0,
					page: 0,
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false
				}
			}
		},
		methods: {
			getsel(index) {
				this.selNav = index;
				let item = this.navList[index];
				this.pageParam.num_type = item.itemId;
				this.pageParam.page = 0;
				this.pageResult.list = [];
				this.getList();
			},
			getList(){
				var self = this;
				self.pageParam.page++
				serve.request({
					url: '/member/credits-log/index',
					data: self.pageParam
				}).then(res => {
					console.log(res.data); 
					if (res.data && res.data.length > 0) {
						self.pageResult.list=self.pageResult.list.concat(res.data);
					}
					self.pageResult.isEmpty = self.pageResult.list.length == 0;
					self.pageResult.isEnd = res.data.length == 0; 
				});
			},
			getNowVal() {
				serve.request({
					url: '/member/member/account',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
					}
				}).then(res => {
					this.nowVal = this.pageParam.type == 'member' ? res.data.achievement : res.data.merchant_achievement;
					// this.nowMoney = res.data.achievementMoney;
				});
			},
			jump(jump_type, jump_link){
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			this.pageParam.type = options.type || 'member';
			this.getNowVal();
			this.getList();
		},
		onPullDownRefresh() {
			this.pageParam.page=0;
			this.pageResult.list=[];
			this.getList();
		},
		onReachBottom() {
			if(this.pageResult.isEnd ||this.pageResult.isEmpty){
				return
			}
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.forceDetail{
		.pickupView{
			display: flex;
			align-items: center;
			padding: 10rpx 27rpx 10rpx 0rpx;
			box-sizing: border-box;
			text-align: center;
			
			view {
				width: 50%;
				font-size: 32rpx;
				position: relative;
				text-align: center;
			}
		}
		.show{
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.title{
				text-align: center;
				font-size: 32rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1rpx rgba(60, 72, 104, 0.05) solid;
			}
			input{
				padding: 20rpx 30rpx;
				border: 2rpx solid #ccc;
				width: 80%;
				margin: 50rpx 5%;
			}
			.info{
				padding: 0 20rpx 40rpx;
			}
			.btn{
				font-size: 28rpx;
				// padding: 20rpx 90rpx;
				display: flex;
				justify-content: space-between;
				border-top: 1rpx rgba(60, 72, 104, 0.05) solid;
				text{
					width: 50%;
					    height: 100rpx;
					    line-height: 100rpx;
					    text-align: center;
				}
			}
		}
		.top{
			position: relative;
			width:100%;
			// height:200rpx;
			padding: 28rpx 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size:24rpx;
			color:rgba(255,255,255,1);
			background-size: 100% 100%;
			background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/forceDetail_bg.png);
			background-repeat: no-repeat;
			.num{
				display: flex;
			    align-items: center;
				font-size:60rpx;
				font-weight:bold;
				color:rgba(255,255,255,1);
				image{
					width:54rpx;
					height:45rpx;
					margin-right: 10rpx;
				}
			}
			text:nth-child(2){
				font-size: 24rpx;
				color:#ffffff;
			}
			.btn{
				width:220rpx;
				height:54rpx;
				line-height: 54rpx;
				background:rgba(131, 65, 204, 1);
				
				border-radius:27rpx;
				margin-top: 53rpx;
				color: #FFFFFF;
				font-size: 24rpx;
				text-align: center;
                margin-right: 20rpx;
			}
			.gz{
				position: absolute;
				right: 30rpx;
				top: 50rpx;
				font-size: 24rpx;
				color: #333333;
				text-decoration: underline;
			}
		}
		.nav {
			box-sizing: border-box;
			padding: 40rpx 50rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx rgba(60, 72, 104, 0.1) solid;
		
			.nav-item {
				height: 32rpx;
				padding: 0rpx 10rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: rgba(39, 52, 88, 0.5);
				border-bottom: 8rpx rgba(243, 204, 91, 0) solid;
			}
		
			.hover {
				border-bottom: 8rpx rgba(243, 204, 91, 1) solid;
				color: rgba(39, 52, 88, 1);
			}
		}
	    .line{
			display: flex;
			box-sizing: border-box;
			padding: 42rpx 30rpx;
			justify-content: space-between;
			border-bottom: 1rpx rgba(235,236,240,1) solid;
			.left{
				width: 450rpx;
				display: flex;
				flex-direction: column;
				font-size:28rpx;
				color:rgba(60,72,104,1);
				text:last-child{
					font-size:24rpx;
					color:rgba(60,72,104,0.5);
					margin-top: 54rpx;
				}
			}
			.right{
				font-size:36rpx;
				font-weight: bold;
				color:rgba(255,200,10,1);
				display: grid;
				.red{
					color:#EB5938
				}
			}
		}
	    .nolist{
	    		width: 100%;
	    		display: flex;
	    		flex-direction: column;
	    		align-items: center;
	    		font-size:28rpx;
	    		color:rgba(204,204,204,1);
	    		image{
	    			margin-top: 140rpx;
	    			width:112rpx;
	    			margin-bottom: 45rpx;
	    		}
	    	}
	    
	}
</style>
